<template>
  <div class="app-container">
    <div class="data-block">
      <div>
        <img src="../../assets/building.png" style="width: 60px;height: 60px;margin-left: 40px;margin-top: 40px">
        <span style="position: relative;left: 30px;top: -30px">总栋数</span>
        <h2 style="position: relative;left: 150px;top: -60px">{{ builds }}</h2>
      </div>
      <div>
        <img src="../../assets/dormitorys.png" style="width: 60px;height: 60px;margin-left: 40px;margin-top: 40px">
        <span style="position: relative;left: 30px;top: -30px">总宿舍数</span>
        <h2 style="position: relative;left: 150px;top: -60px">{{ dormitorys }}</h2>
      </div>
      <div>
        <img src="../../assets/users.png" style="width: 60px;height: 60px;margin-left: 40px;margin-top: 40px">
        <span style="position: relative;left: 30px;top: -30px">用户访问数</span>
        <h2 style="position: relative;left: 150px;top: -60px">{{ accesses }}</h2>
      </div>
      <div>
        <img src="../../assets/user.png" style="width: 60px;height: 60px;margin-left: 40px;margin-top: 40px">
        <span style="position: relative;left: 30px;top: -30px">总用户数</span>
        <h2 style="position: relative;left: 150px;top: -60px">{{ users }}</h2>
      </div>
    </div>
    <div class="chart">
      <div id="dynamic-sort-chart" ref="dynamic-sort-chart" class="dynamic-sort-chart" />
      <div id="broken-line-chart" ref="broken-line-chart" class="broken-line-chart"/>
      <div id="pie-chart" ref="pie-chart" class="pie-chart"/>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import DataProfileApi from '../../api/dataProfile'
var data = []
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200))
}
var option2 = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2 // only the largest 3 bars will be displayed
  },
  series: [
    {
      realtimeSort: true,
      name: 'X',
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  legend: {
    show: true
  },
  animationDuration: 3000,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
}

export default {
  name: 'DataProfile',
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: '今年的增长',
      items: [
        require('@/assets/404_images/404.png'),
        require('@/assets/404_images/404_cloud.png'),
        require('@/assets/404_images/404.png'),
        require('@/assets/404_images/404_cloud.png')
      ],
      builds: 0,
      dormitorys: 0,
      accesses: 0,
      users: 0
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.init()
    })
  },
  created() {
    this.getBuilds()
    this.getUsers()
    this.getAccesses()
    this.getSDormitorys()
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化pie-charts实例
      var myChart1 = echarts.init(document.getElementById('pie-chart'))
      var option1 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '手机访问' },
              { value: 735, name: '电脑访问' },
              { value: 580, name: 'ipad访问' }
            ]
          }
        ]
      }
      myChart1.setOption(option1)
      // 初始化动态排序柱状图
      var myChart2 = echarts.init(document.getElementById('dynamic-sort-chart'))
      myChart2.setOption(option2)
      var option3 = {
        xAxis: {
          type: 'category',
          data: ['春', '夏', '秋', '冬']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 110],
            type: 'line'
          }
        ]
      }
      var myChart3 = echarts.init(document.getElementById('broken-line-chart'))
      myChart3.setOption(option3)
    },
    getBuilds() {
      DataProfileApi.getBuilds().then(response => {
        this.builds = response.data
      })
    },
    getSDormitorys() {
      DataProfileApi.getSDormitorys().then(response => {
        this.dormitorys = response.data
      })
    },
    getAccesses() {
      DataProfileApi.getAccesses().then(response => {
        this.accesses = response.data
      })
    },
    getUsers() {
      DataProfileApi.getUsers().then(response => {
        this.users = response.data
      })
    }
  }
}
</script>
<style lang="scss">
  .app-container{
    height: 100%;
    background: #f9f9f9;
  }
  .data-block{
    width: 100%;
    height: 150px;
  }
  .data-block div{
    width: 23%;
    float: left;
    margin-left: 23px;
    background: white;
    height: 100%;
  }
  .data-block>div>span{
    margin-top: 10px;
    margin-left: 10px;
    width: 100px;
    height: 40px;
    line-height: 40px;
  }
  .chart{
    width: 96%;
    height: 450px;
    margin-left: 30px;
    margin-top: 30px;
    background: white;
  }
  .pie-chart{
    float: left;
    width: 300px;
    margin-left: 30px;
    height: 100%;
  }
  .broken-line-chart{
    float: left;
    width: 400px;
    margin-left: 30px;
    height: 100%;
  }
  .dynamic-sort-chart{
    float: left;
    width: 500px;
    height: 100%;
  }
</style>
